<template>
    <div>
        <h1>修改活动管理</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">活动标题</td>
                    <td><input type="text" v-model="info.testName"></td>
                </tr>
                <tr>
                    <td align="right">分类</td>
                    <td>
                        <select v-model="info.typeId">
                            <option value="">请选择</option>
                            <option v-for="item in tests" :value="item.typeId">{{ item.typeName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">图片</td>
                    <td><input type="file" @change="img">
                        <img :src="info.testPhoto" width="60" height="60" v-if="info.testPhoto!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right">活动日期</td>
                    <td><input type="date" v-model="info.startTime"></td>
                </tr>
                
                <tr>
                    <td align="right">活动地点</td>
                    <td><input type="text" v-model="info.address"></td>
                </tr>
                <tr>
                    <td align="right">报名截止日期</td>
                    <td><input type="date" v-model="info.endTime"></td>
                </tr>
                <tr>
                    <td align="right">活动详情</td>
                    <td><input type="text" v-model="info.testDesc"></td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="修改" @click="updtest" class="btn btn-primary"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from "axios";
import moment from "moment";
import {useRouter,useRoute} from "vue-router";
const router=useRouter();
const route=useRoute();
onMounted(()=>
{
    bindtest();
    find();
})
let info:any=reactive({
  "id": route.query.id,
  "testName": "",
  "typeId": "",
  "testPhoto": "",
  "startTime": "",
  "address": "",
  "endTime": "",
  "testDesc": ""
})
const updtest=()=>
{
    if(info.testName=="")
    {
        alert("活动标题不能为空");
        return;
    }
    if(info.testPhoto=="")
    {
        alert("图片不能为空");
        return;
    }
    if(info.typeId=="")
    {
        alert("分类不能为空");
        return;
    }
    axios({
        url:'http://localhost:5086/api/User/UpdateTest',
        method:'put',
        data:info
    })
    .then((res)=>
    {
        console.log(res);
        
        if(res.data>0)
        {
            alert("修改活动成功");
            router.push('/showtest')
            return;
        }
        else
        {
            alert("修改活动失败");
            return;
        }
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
let tests:any=ref([]);
const bindtest=()=>
{
    axios({
        url:'http://localhost:5086/api/User/BindType',
        method:'get',
    })
    .then((res)=>
    {
        console.log(res);
        tests.value=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
const img=(e:any)=>
{
    var obj=e.target.files[0];
    let f=new FormData();
    f.append("file",obj);
    axios({
        url:'http://localhost:5086/api/User/Upload',
        method:'post',
        data:f
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data=="不是图片")
        {
            alert("您选择的不是图片");
            return;
        }
        if(res.data=="大于2M")
        {
            alert("您选择的图片大于2M");
            return;
        }
        info.testPhoto=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
const find=()=>
{
    axios({
        url:'http://localhost:5086/api/User/FindTest',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then((res)=>
    {
        console.log(res);
        Object.assign(info,res.data);
        info.startTime=res.data.startTime.substring(0,10);
        info.endTime=res.data.endTime.substring(0,10);
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
</script>

<style scoped>

</style>